<template>
	<view class="field-cascader field-form-item">
		<u-form-item
			:label="label"
			:required="required"
			:prop="prop"
			:right-icon="disabled ? '' : 'arrow-right'"
		>
			<view @click="showPickerDlg = !disabled" style="width: 100%; height: 37px">
				<view class="ellipsis-text" v-if="getShowValue == null || getShowValue === ''" style="color: rgb(192, 196, 204)">{{ placeholder }}</view>
				<view class="ellipsis-text" v-else>{{ getShowValue }}</view>
			</view>
			<CustomPopup
				class="cascader-select-popup"
				:title="label"
				:showPickerDlg="showPickerDlg"
				position="bottom"
				@close="onCancel"
				@reset="onReset"
				@confirm="onConfirm"
			>
				<CustomCascaderPanel
					ref="cascadePanel"
					height="100%"
					:value="selectValue"
					:multiple="multiple"
					:color="color"
					:options="treeDataList"
					:props="props"
					@changeCheck="onSelectChange"
				/>
				<u-empty style="margin: auto 0;" text="暂无数据" mode="list" v-if="dataList.length <= 0"></u-empty>
			</CustomPopup>
		</u-form-item>
	</view>
</template>

<script>
	import { findTreeNode, traverseTree, findTreeNodeObjectPath } from '@/utils/index.js';
	import CustomPopup from './CustomPopup/index.vue';
	import CustomCascaderPanel from './CustomCascaderPanel/index.vue';
	import { validateWidget } from '@/utils/validate.js';
	
	export default{
		components:{
			CustomPopup,
			CustomCascaderPanel
		},
		props:{
			widget:{
				type: Object
			},
			prop: {
				type: String
			},
			value: {
				type: [String, Number, Array]
			},
			label: {
				type: String
			},
			placeholder: {
				type: String
			},
			disabled: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			rules: {
				type: Array
			},
			// 是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			// 选中颜色
			color: {
				type: String
			},
			dataList: {
				type: Array,
				default: () => []
			},
			props: {
				type: Object,
				default: () => {
					return {
						value: 'id',
						label: 'name',
						children: 'children',
						showCheckbox: 'showCheckbox'
					}
				}
			}
		},
		data(){
			return{
				showPickerDlg: false,
				selectValue: undefined,
				errorMessage: ''
			}
		},
		created() {
			
		},
		methods:{
			onCancel() {
				this.showPickerDlg = false;
			},
			onConfirm() {
				this.$emit('input', this.selectValue);
				this.onCancel();
			},
			onReset() {
				this.selectValue = this.multiple ? [] : null;
			},
			onSelectChange(value) {
				console.log('onSelectChange', value);
				this.selectValue = value;
			},
			validateWidget() {
				return new Promise((resolve, reject) => {
					validateWidget(this.rules, this.value).then(res => {
						this.errorMessage = '';
						resolve();
					}).catch(e => {
						this.errorMessage = e;
						resolve(e)
					});
				});
			}
		},
		computed: {
			treeDataList() {
				traverseTree(this.dataList, (node) => {
					node.showCheckbox = this.multiple;
				});
				return [...this.dataList];
			},
			getShowValue() {
				console.log(this.treeDataList,'treeDataList')
				if (Array.isArray(this.value)) {
					let arr = [];
					this.value.forEach(item => {
						let path = findTreeNodeObjectPath(this.dataList, item, this.props.value).map(item => item[this.props.label]);
						if (path) {
							arr.push(path.join(' / '));
						}
					});
					return arr.join(',');
				} else {
					let path = findTreeNodeObjectPath(this.dataList, this.value, this.props.value).map(item => item[this.props.label]);
					if (path) {
						return path.join(' / ');
					}
				}
			}
		}
	}
</script>

<style scoped lang="less">
	
</style>